<!--
  Copyright [2025] [OBARA (Nanjing) Electromechanical Co., Ltd]

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->


{% extends 'base.html' %}

{% block title %}管理仪表板 - 小原焊枪选型数据库{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4 fade-in-up">
            <h1 class="display-6 fw-bold">
                <i class="bi bi-speedometer2 me-2"></i>
                管理仪表板
            </h1>
            <div>
                <span class="badge bg-success">管理员</span>
            </div>
        </div>
        
        <!-- 统计卡片 -->
        {% if request.user.is_superuser %}
        <div class="row g-4 mb-5">
            <div class="col-md-3">
                <div class="card text-center h-100 fade-in-up">
                    <div class="card-body">
                        <i class="bi bi-gear text-primary" style="font-size: 3rem;"></i>
                        <h3 class="mt-3 mb-1">{{ total_products }}</h3>
                        <p class="text-muted mb-0">产品总数</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card text-center h-100 fade-in-up">
                    <div class="card-body">
                        <i class="bi bi-people text-success" style="font-size: 3rem;"></i>
                        <h3 class="mt-3 mb-1">{{ total_users }}</h3>
                        <p class="text-muted mb-0">用户总数</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card text-center h-100 fade-in-up">
                    <div class="card-body">
                        <i class="bi bi-diagram-3 text-info" style="font-size: 3rem;"></i>
                        <h3 class="mt-3 mb-1">{{ total_categories }}</h3>
                        <p class="text-muted mb-0">分类总数</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card text-center h-100 fade-in-up">
                    <div class="card-body">
                        <i class="bi bi-clock-history text-warning" style="font-size: 3rem;"></i>
                        <h3 class="mt-3 mb-1">{{ recent_logs|length }}</h3>
                        <p class="text-muted mb-0">最近操作</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- 管理功能 -->
        <div class="row g-4 mb-5">
            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-people me-2"></i>
                            用户管理
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">管理系统用户账户，包括新增、配置、激活、停用用户等操作。</p>
                        <a href="{% url 'clamps:manage_users' %}" class="btn btn-primary">
                            <i class="bi bi-arrow-right me-2"></i>
                            进入用户管理
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-list-ul me-2"></i>
                            日志管理
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">查看和管理系统操作日志，监控用户活动和系统运行情况。</p>
                        <a href="{% url 'clamps:view_logs' %}" class="btn btn-success">
                            <i class="bi bi-arrow-right me-2"></i>
                            查看日志
                        </a>
                    </div>
                </div>
            </div>
            
            {% if request.user.is_superuser %}
            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-bar-chart me-2"></i>
                            数据分析
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">查看下载数据可视化分析，包括趋势图表和用户下载统计信息。</p>
                        <a href="{% url 'clamps:analytics' %}" class="btn btn-warning">
                            <i class="bi bi-arrow-right me-2"></i>
                            进入数据分析
                        </a>
                    </div>
                </div>
            </div>
            {% endif %}
            
            {% if request.user.is_superuser %}
            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-download me-2"></i>
                            数据导出
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">导出所有产品数据和全部日志数据。</p>
                        <a href="{% url 'clamps:export_data' %}" class="btn btn-info">
                            <i class="bi bi-arrow-right me-2"></i>
                            数据导出
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-upload me-2"></i>
                            CSV数据导入
                            <a href="/static/pdf/csv文件导入前数据标准化流程.pdf" target="_blank" class="btn btn-outline-info btn-sm ms-2" title="使用指南">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">通过CSV文件导入功能批量创建或更新产品数据。</p>
                        <a href="{% url 'clamps:import_csv' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-right me-2"></i>
                            导入数据
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-arrow-repeat me-2"></i>
                            文件同步
                            <a href="/static/pdf/获取media文件标准化流程.pdf" target="_blank" class="btn btn-outline-info btn-sm ms-2" title="使用指南">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">同步media文件夹中的pdf、step和bmp文件路径到数据库。</p>
						<form action="{% url 'clamps:sync_files' %}" method="post">
							{% csrf_token %}
							<button type="submit" class="btn btn-warning" 
									onclick="return confirm('确定要同步文件吗？');">
								<i class="bi bi-arrow-right me-2"></i>
								同步文件
							</button>
						</form>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100 fade-in-up">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-gear-wide-connected me-2"></i>
                            Django管理后台
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Django原生管理后台，进行数据维护和用户授权操作。</p>
                        <a href="/admin/" target="_blank" class="btn btn-danger">
                            <i class="bi bi-box-arrow-up-right me-2"></i>
                            打开管理后台
                        </a>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
        
        <!-- 最近操作日志 -->
        {% if request.user.is_superuser %}
        <div class="card fade-in-up">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-clock-history me-2"></i>
                    最近操作日志
                </h5>
            </div>
            <div class="card-body">
                {% if recent_logs %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>用户</th>
                                    <th>操作类型</th>
                                    <th>详情</th>
                                    <th>IP地址</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in recent_logs %}
                                    <tr>
                                        <td>{{ log.timestamp|date:"m-d H:i" }}</td>
                                        <td>
                                            {% if log.user %}
                                                <span class="badge bg-primary">{{ log.user.username }}</span>
                                            {% else %}
                                                <span class="badge bg-secondary">匿名</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if log.action == 'login' %}
                                                <span class="badge bg-success">{{ log.action }}</span>
                                            {% elif log.action == 'search' %}
                                                <span class="badge bg-info">{{ log.action }}</span>
                                            {% elif log.action == 'download' %}
                                                <span class="badge bg-warning">{{ log.action }}</span>
                                            {% else %}
                                                <span class="badge bg-secondary">{{ log.action }}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ log.details|truncatechars:50 }}
                                            </small>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ log.ip_address|default:"--" }}</small>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <a href="{% url 'clamps:view_logs' %}" class="btn btn-outline-primary">
                            查看全部日志
                        </a>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                        <p class="text-muted mt-3">暂无操作日志</p>
                    </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}






